<template>
  <el-card class="box-card show-print" v-if="isShowTips">
    <span class="show-print-text">
      <span class="text-black text-df">
        <el-icon v-if="tiptype === 'error'" class="text-bold text-red">
          <WarningFilled />
        </el-icon>
        <el-icon v-else class="is-loading ">
          <Loading />
        </el-icon>
      </span>
      <span class="text-df margin-left-xs text-bold text-red" v-if="tiptype === 'error'">{{ textTips }}</span>
      <span class="text-black text-df margin-left-xs" v-else>{{ textTips }}</span>
    </span>
  </el-card>
</template>
<script lang="ts" setup>
import { h } from 'vue';
import { ElNotification } from 'element-plus';
import { IsEmpty } from '@/utils/common';
import { reactive, ref, getCurrentInstance, onMounted, watch, provide } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';

let { proxy }: any = getCurrentInstance();

let props = defineProps({
  printParams: { type: Object as PropType<any>, default: null },/*打印参数*/
});
let tiptype = ref('primary');
let isShowTips = ref(false);
let textTips = ref('正在打印中...');
defineExpose({ print2 });

watch(() => props.printParams, (n, o) => {
  if (n && !IsEmpty(n)) {
    textTips.value = '正在打印中...';
    print();
  }

}, { immediate: true, deep: true });

// 解析query数据
function queryParse(query) {
  let queryText = '';
  for (let key in query) {
    queryText += `${key}=${query[key]}&`;
  }
  return queryText.slice(0, -1);
}




/**
 * 调用本地服务进行打印
 * 
 */
function print(params: type) {
  isShowTips.value = true;
  const islocserstart = sessionStorage.getItem('locserstart');
  if (!islocserstart || IsEmpty(islocserstart)) {
    //VxeMessage('本地服务未打开', VxeNotifyType.error);
    tiptype.value = 'error';
    textTips.value = '本地服务未打开';
    setTimeout(() => {
      tiptype.value = 'primary';
      isShowTips.value = false;
      textTips.value = '正在打印中...';
    }, 2500);
    return;
  }
  isShowTips.value = true;

  try {
    const arParam = {
      Header: null,
      Bodys: props.printParams
    };
    console.log('printParamsObj', arParam);

    const option = {
      method: 'POST',
      headers: {
        'Content-type': 'application/json; charset=UTF-8'
      },
      body: JSON.stringify({ activeReportInput: arParam, fs: 1 }),// queryParse({ activeReportInput: arParam, fs: 1 })
    };
    const a = fetch(`${window.apiUrl.VUE_APP_LOCAL_PRINT_URL}/api/ActiveReport/print-service`, option);

    a.then(response => {
      if (!response.ok) {
        setTimeout(() => {
          isShowTips.value = false;
        }, 500);
        throw new Error('Network response was not ok');
      }
      const b = response.json();
      b.then(c => {
        if (c && !IsEmpty(c)) {
          if (!IsEmpty(c.Message)) {
            textTips.value = c.Message;
          }
        }
        setTimeout(() => {
          isShowTips.value = false;
        }, 500);
      }).catch(er => {
        setTimeout(() => {
          isShowTips.value = false;
        }, 500);
        throw er;
      });
    }).catch(error => {
      setTimeout(() => {
        isShowTips.value = false;
      }, 500);
      throw error;
    });
  } catch (error) {
    setTimeout(() => {
      isShowTips.value = false;
    }, 500);
    throw error;
  }
}


/**
 * 调用本地服务进行打印
 * 
 */
function print2(printParams) {
  console.log(printParams);
  isShowTips.value = true;
  const islocserstart = sessionStorage.getItem('locserstart');
  if (!islocserstart || IsEmpty(islocserstart)) {
    //VxeMessage('本地服务未打开', VxeNotifyType.error);
    tiptype.value = 'error';
    textTips.value = '本地服务未打开';
    setTimeout(() => {
      tiptype.value = 'primary';
      isShowTips.value = false;
      textTips.value = '正在打印中...';
    }, 2500);
    return;
  }
  isShowTips.value = true;

  try {
    printParams.forEach((item, index) => {
      const arParam = {
        Header: null,
        Bodys: [item]
      };
      console.log('printParamsObj', arParam);

      const option = {
        method: 'POST',
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({ activeReportInput: arParam, fs: item.num }),// queryParse({ activeReportInput: arParam, fs: 1 })
      };
      const a = fetch(`${window.apiUrl.VUE_APP_LOCAL_PRINT_URL}/api/ActiveReport/print-service`, option);

      a.then(response => {
        if (!response.ok) {
          setTimeout(() => {
            isShowTips.value = false;
          }, 500);
          throw new Error('Network response was not ok');
        }
        const b = response.json();
        b.then(c => {
          if (c && !IsEmpty(c)) {
            if (!IsEmpty(c.Message)) {
              textTips.value = c.Message;
            }
          }
          setTimeout(() => {
            isShowTips.value = false;
          }, 500);
        }).catch(er => {
          setTimeout(() => {
            isShowTips.value = false;
          }, 500);
          throw er;
        });
      }).catch(error => {
        setTimeout(() => {
          isShowTips.value = false;
        }, 500);
        throw error;
      });
    })

  } catch (error) {
    setTimeout(() => {
      isShowTips.value = false;
    }, 500);
    throw error;
  }
}

const open1 = () => {
  ElNotification({
    title: '提示',
    message: h('i', { style: 'color: teal' }, '正在打印...'),
    type: 'success',
    duration: 0,
    showClose: false
  })
}
</script>
<style lang="scss" scoped>
// 打印提示框
.el-card.show-print {
  position: fixed;
  right: 0;
  top: 50px;
  border-radius: 6px;
  z-index: 9;
  border: 1px solid #67c23a;

  :deep(.el-card__body) {
    padding: 15px 20px;
    color: #67c23a;
    position: relative;
  }

  .el-icon-loading {
    font-weight: 700;
    margin-right: 4px;
  }

  .el-icon-close {
    position: absolute;
    right: 3px;
    top: 3px;
    color: #666;
    cursor: pointer;
  }
}
</style>
